<template>
  <div class="app-container home" style="padding: 20px 10px">
    <!-- <el-row>{{ title }}</el-row>
    <div class="content">
      <img class="companyIcon" :src="require('@/assets/logo/logo.png')">
      <div class="textContent">
        <div class="companyTitle">医美中心</div>
        <div class="companyTitle2">智能病历管理系统</div>
        <div class="companyMark">医美,用专业把美丽完美复制</div>
        <div class="companyButton">欢迎使用</div>
      </div>
    </div> -->

    <!-- <div class="formBox"> -->
    <el-row>
      <el-col :xs="24" :sm="24" :md="24" :lg="14" :xl="14">
        <div class="formBox">
          <div class="contentBox first">
            <div class="contentBoxLeft">
              <div class="line">
                <img class="imgIcon" src="@/assets/images/dataLine.png" alt="404" />
              </div>
              <div class="name">今日看板</div>
            </div>
            <div class="contentBoxRight">
              <el-form :inline="true" label-width="0px" size="mini">
                <el-form-item clearable label="" prop="hospital" label-width="0px">
                  <department :isHospital="true" :isdepat="true" :isShowLabel="true" @refreshData="refreshData"
                    deptWidth="150px">
                  </department>

                </el-form-item>

                <el-form-item clearable label="" prop="" label-width="0px">
                  <el-date-picker v-model="dateRange" style="width: 180px;" value-format="yyyy-MM-dd" type="daterange"
                    size="mini" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                    :picker-options="pickerOptions" @change="getData" :clearable="false"></el-date-picker>
                </el-form-item>
                <el-form-item clearable label="" prop="" label-width="0px">
                  <el-button size="mini" @click="search">刷新</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <div class="count-box" id="countBoxContainers">
            <!-- <div class="item-box" v-for="item in dataList">
                <i :class="item.icon" style="font-size:16px;color:#0256FF;"></i>
                <span class="name">{{ item.name }}</span>
                <div>
                  <span class="count">{{ item.count }}</span>
                  <span class="unit">{{ item.unit }}</span>
                </div>
              </div> -->
            <div class="item-box">
              <i class="el-icon-user-solid" style="font-size: 16px; color: #0256ff"></i>
              <span class="name">顾客登记人次</span>
              <div>
                <span class="count">{{ dashboard.visitCount }}</span>
                <span class="unit">人次</span>
              </div>
            </div>
            <div class="item-box">
              <i class="el-icon-user-solid" style="font-size: 16px; color: #0256ff"></i>
              <span class="name">顾客咨询人次</span>
              <div>
                <span class="count">{{ dashboard.consultationCount }}</span>
                <span class="unit">人次</span>
              </div>
            </div>
            <div class="item-box">
              <i class="el-icon-user-solid" style="font-size: 16px; color: #0256ff"></i>
              <span class="name">顾客诊断人次</span>
              <div>
                <span class="count">{{ dashboard.diagnosisCount }}</span>
                <span class="unit">人次</span>
              </div>
            </div>
            <div class="item-box">
              <i class="el-icon-user-solid" style="font-size: 16px; color: #0256ff"></i>
              <span class="name">顾客治疗人次</span>
              <div>
                <span class="count">{{ dashboard.treatmentCount }}</span>
                <span class="unit">人次</span>
              </div>
            </div>

            <div class="item-box">
              <i class="el-icon-bank-card" style="font-size: 16px; color: #0256ff"></i>
              <span class="name">开单总收入</span>
              <div>
                <span class="count">{{
        getNum(dashboard.totalExpenses)
          ? getNum(dashboard.totalExpenses)
          : 0
      }}</span>
                <span class="unit">{{
          getNumUnit(dashboard.totalExpenses)
        }}</span>
              </div>
            </div>
            <div class="item-box">
              <i class="el-icon-bank-card" style="font-size: 16px; color: #0256ff"></i>
              <span class="name">治疗开单总收入</span>
              <div>
                <span class="count">{{
          getNum(dashboard.treatmentExpenses)
            ? getNum(dashboard.treatmentExpenses)
            : 0
        }}</span>
                <span class="unit">{{
          getNumUnit(dashboard.treatmentExpenses)
        }}</span>
              </div>
            </div>
            <div class="item-box">
              <i class="el-icon-bank-card" style="font-size: 16px; color: #0256ff"></i>
              <span class="name">已治疗收入</span>
              <div>
                <span class="count">{{
          getNum(dashboard.isTreatmentExpenses)
            ? getNum(dashboard.isTreatmentExpenses)
            : 0
        }}</span>
                <span class="unit">{{
          getNumUnit(dashboard.isTreatmentExpenses)
        }}</span>
              </div>
            </div>
            <div class="item-box">
              <i class="el-icon-user-solid" style="font-size: 16px; color: #0256ff"></i>
              <span class="name">预约</span>
              <div>
                <span class="count">
                  <span>{{
          dashboard.toDivisor ? dashboard.toDivisor : 0
        }}</span>
                  <span style="font-size: 18px">/{{
          dashboard.appointmentsMadeNum
            ? dashboard.appointmentsMadeNum
            : 0
        }}</span>
                </span>
                <span class="unit">人次</span>
              </div>
            </div>
            <div class="item-box">
              <i class="el-icon-user-solid" style="font-size: 16px; color: #0256ff"></i>
              <span class="name">电话随访数</span>
              <div>
                <span class="count">{{ dashboard.phoneCount }}</span>
                <span class="unit">人次</span>
              </div>
            </div>
            <div class="item-box">
              <i class="el-icon-user-solid" style="font-size: 16px; color: #0256ff"></i>
              <span class="name">小程序随访</span>
              <div>
                <span class="count">{{ dashboard.miniProgramCount }}</span>
                <span class="unit">人次</span>
              </div>
            </div>
            <div class="item-box">
              <i class="el-icon-user-solid" style="font-size: 16px; color: #0256ff"></i>
              <span class="name">顾客投诉数</span>
              <div>
                <span class="count">{{ dashboard.complaintCount }}</span>
                <span class="unit">人次</span>
              </div>
            </div>
            <div class="item-box">
              <i class="el-icon-user-solid" style="font-size: 16px; color: #0256ff"></i>
              <span class="name">顾客表扬数</span>
              <div>
                <span class="count">{{ dashboard.praiseCount }}</span>
                <span class="unit">人次</span>
              </div>
            </div>
          </div>
        </div>
      </el-col>

      <el-col :xs="24" :sm="24" :md="24" :lg="10" :xl="10">
        <div class="formBox" style="margin-left: 10px">
          <div style="">
            <div class="contentBox second">
              <div class="contentBoxLeft">
                <div class="line">
                  <img class="imgIcon" src="@/assets/images/notice.png" alt="404" />
                </div>
                <div class="name">公告信息</div>
              </div>
              <div class="contentBoxRight">
                <section class="theme-list">
                  <div class="fixed-nav" ref="fixednav">
                    <div class="fixed-nav-content" ref="fixednavcontent">
                      <p :class="['tab-title', activeId === -1 && 'select-tab']" @click="tabsOnclick(-1, $event)">
                        全部
                        <i class="line0"></i>
                      </p>
                      <p v-for="(item, index) in dict.type.sys_info_type" :key="index" :class="[
        'tab-title',
        activeId === index && 'select-tab',
      ]" @click="tabsOnclick(index, $event)">
                        {{ item.label }}
                        <i class="line0"></i>
                      </p>
                    </div>
                  </div>
                </section>
              </div>
            </div>
            <div id="publishMain" class="b_list" @mouseover="clearTime" @mouseout="startTime">
              <div id="publishMain1">
                <div class="b_item" v-for="(item, i) in infoList" :key="i" @click="showpublishDialog(item)">
                  <p class="p_item">
                    <span :class="'b_itemColor' + item.category">【{{ matchDict("sys_info_type", item.category) }} -
                      {{ item.form == 1 ? "图文" : "视频" }}】</span>
                    {{ item.title }}
                  </p>
                </div>
              </div>
              <div id="publishMain2"></div>
              <div v-if="infoList && infoList.length == 0">
                <img class="parent-img" src="@/assets/images/noNotice.png" alt="404" />
                <!-- <div class="parent-text">暂无公告信息！</div> -->
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- </div> -->
    <!-- 通知信息查询-->
    <el-dialog :title="publishTitle" :visible.sync="publishDialog" width="70%" :close-on-click-modal="false"
      v-dialogDrag>
      <div class="publishTitle">
        {{ publishTitle }}
      </div>
      <div class="publishContent">
        <div v-html="publishObj.content" v-if="publishObj.form == 1"></div>
        <div v-if="publishObj.form == 2" class="publishVideo">
          <video width="100%" height="100%" controls="controls" :src="publishObj.videoUrl"
            v-if="publishObj.videoUrl"></video>
        </div>
      </div>
    </el-dialog>

    <div class="formBox">
      <div class="everyValueBox">
        <el-checkbox v-model="everyValue" @change="search">每日数据统计</el-checkbox>
      </div>
      <div class="echart-box">
        <el-row :gutter="10" style="margin-bottom: 10px">
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <div id="treatmentAndIncome" style="width: 100%; height: 390px"></div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <div id="appointment" style="width: 100%; height: 390px" v-if="queryParams.hospitalId"></div>
            <div v-else style="width: 100%; height: 390px">
              <img class="parent-img" src="@/assets/404_images/404_cloud.png" alt="404" />
              <div class="parent-text">请选择医院，查看数据！</div>
            </div>
          </el-col>
        </el-row>
        <!-- <div id="treatmentAndIncome" style="width: 650px;height:390px;"></div>
        <div class="line"></div>
        <div id="appointment" style="width: 650px;height:390px;" v-if="queryParams.hospitalId">

        </div>
        <div v-else style="width: 650px;height:390px;">
          <img class="parent-img" src="@/assets/404_images/404_cloud.png" alt="404">
          <div class="parent-text">请选择医院，查看数据！</div>
      </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { listDashboard, listDashboardDate } from "@/api/BI/index";
import {
  infoView,
  getInfoDetail,
  infoRecord,
} from "@/api/infoRelease/infoRelease";
import { statisticsHospitalByTime } from "@/api/system/specialCom";
import department from "@/views/components/department/index.vue";
import { number } from "echarts/lib/export";
const treatmentAndIncomeOption = {
  title: {
    text: "治疗人次和收入表",
  },
  // 滚动条
  dataZoom: [
    {
      type: "slider",
      show: false,
      start: 0,
      end: 30,
      height: 15,
      xAxisIndex: [0],
    },
  ],
  label: {
    show: true, //开启显示数值
    position: "top", //数值在上方显示
    textStyle: {
      //数值样式
      //color: '#D1DBFF',   //字体颜色
      //fontSize: 14  //字体大小
    },
  },
  legend: {
    // Try 'horizontal'
    orient: "horizontal",

    bottom: 0,
  },
  tooltip: {},
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      // dataView : {show: true, readOnly: false},
      magicType: { show: true, type: ["line", "bar", "stack", "tiled"] },
      restore: { show: true },
      saveAsImage: { show: true },
    },
  },
  dataset: {
    dimensions: ["product", "诊断/人次", "治疗/人次", "收入/万元"],
    source: [],
  },
  xAxis: { type: "category" },
  yAxis: {},
  series: [
    { type: "bar", color: "#67c23a", barMaxWidth: "20", barGap: "0%" },
    { type: "bar", color: "#165DFF", barMaxWidth: "20", barGap: "0%" },
    { type: "bar", color: "red", barMaxWidth: "20", barGap: "0%" },
  ],
};
const treatmentAndIncomeOption1 = {
  title: {
    text: "治疗人次和收入表",
  },
  // 滚动条
  dataZoom: [
    {
      show: true,
      type: "slider",
      realtime: true,
      startValue: 100,
      endValue: 95,
      yAxisIndex: [0],
      top: "40",
      right: "10",
      width: 10,
      orient: "vertical",
      borderColor: "rgba(0,0,0,0)",
      textStyle: {
        color: "transparent",
      },
    },
  ],
  label: {
    show: true, //开启显示数值
    position: "right", //数值在上方显示
    textStyle: {
      //数值样式
      //color: '#D1DBFF',   //字体颜色
      //fontSize: 14  //字体大小
    },
  },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      // dataView : {show: true, readOnly: false},
      magicType: { show: true, type: ["line", "bar", "stack", "tiled"] },
      restore: { show: true },
      saveAsImage: { show: true },
    },
  },
  legend: {
    // Try 'horizontal'
    orient: "vertical",
    bottom: 0,
  },
  tooltip: {},
  dataset: {
    dimensions: ["treatmentName", "治疗人次"],
    source: [],
  },
  xAxis: {
    //xAxis
    nameTextStyle: {
      borderType: "dotted",
      color: "red",
    },
  },
  yAxis: {
    type: "category",
    padding: [10, 10, 10, 10],

    axisLabel: {
      color: "red",
      rotate: 0,
      interval: 0,
      margin: 5,
      formatter(params) {
        var newParamsName = "";
        var paramsNameNumber = params.length;
        var provideNumber = 5; //一行显示几个字
        var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
        if (paramsNameNumber > provideNumber) {
          for (var p = 0; p < rowNumber; p++) {
            var tempStr = "";
            var start = p * provideNumber;
            var end = start + provideNumber;
            if (p == rowNumber - 1) {
              tempStr = params.substring(start, paramsNameNumber);
            } else {
              tempStr = params.substring(start, end) + "\n";
            }
            newParamsName += tempStr;
          }
        } else {
          newParamsName = params;
        }
        return newParamsName;
      },
    },
  },
  series: [{ type: "bar", color: "#165DFF", barWidth: "30" }],
};
export default {
  name: "Index",
  dicts: ["sys_info_type"],
  components: { department },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;  //如果没有后面的-8.64e6就是不可以选择今天的
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              const end = date;
              const start = date;
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "前天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 2);
              const end = date;
              const start = date;
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近六个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近1年",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      publishTitle: "",
      publishObj: {},
      publishDialog: false,
      activeId: -1,

      timer: null,
      //infoList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
      infoList: [],
      // 版本号
      version: "3.8.3",
      title: process.env.VUE_APP_TITLE,
      // 日期范围
      dateRange: [],
      queryParams: {},
      dashboard: {
        complaintCount: "0",
        consultationCount: "0",
        diagnosisCount: "0",
        miniProgramCount: "0",
        phoneCount: "0",
        praiseCount: "0",
        totalExpenses: "0",
        treatmentCount: "0",
        treatmentExpenses: "0",
        visitCount: "0",
        isTreatmentExpenses: "0",
      },
      // dashboardDateTimer:null,
      everyValue: false,
      // dataList: [
      //   { icon: "el-icon-user-solid", name: '顾客登记数', count: 142, unit: "个" },
      //   { icon: "el-icon-user-solid", name: '顾客咨询数', count: 132, unit: "个" },
      //   { icon: "el-icon-user-solid", name: '顾客诊断数', count: 112, unit: "个" },
      //   { icon: "el-icon-user-solid", name: '顾客治疗数', count: 98, unit: "个" },
      //   { icon: "el-icon-user-solid", name: '电话随访数', count: 344, unit: "个" },
      //   { icon: "el-icon-user-solid", name: '小程序随访', count: 245, unit: "个" },
      //   { icon: "el-icon-bank-card", name: '医疗总收入', count: 35, unit: "万元" },
      //   { icon: "el-icon-bank-card", name: '治疗总收入', count: 26, unit: "万元" },
      //   { icon: "el-icon-user-solid", name: '顾客投诉数', count: 3, unit: "个" },
      //   { icon: "el-icon-user-solid", name: '顾客表扬数', count: 79, unit: "个" },
      // ]
    };
  },
  mounted() {
    this.dateRange = this.defaultTime;
    //this.search()

    // setInterval(() => {
    //   this.search()
    // }, 10000);
    let that = this;
    // let box = document.getElementById("publishMain");
    window.addEventListener("resize", that.rollUp);
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  },
  computed: {
    defaultTime: function () {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      month = month > 9 ? month : "0" + month;
      day = day < 10 ? "0" + day : day;
      let today = year + "-" + month + "-" + day;
      return [today, today];
    },
  },
  // watch: {
  //   everyValue:{
  //     handler(newVal, oldVal) {
  //       if(newVal){
  //         console.log('newVal, oldVal',newVal,oldVal)
  //         this.searchEveryDate()
  //       }else{
  //         // this.search()
  //       }
  //
  //     },
  //     immediate: true,
  //     deep: true,
  //
  //   },
  // },
  methods: {
    /** id转化成对应的文字 */
    matchDict: function (key, id) {
      let _this = this;
      const result = _this.dict.type[key];
      let textValue = "";
      result.forEach((item) => {
        if (item.raw.dictValue == id) {
          textValue = item.raw.dictLabel;
        }
      });
      return textValue;
    },
    /** 查询设备列表 */
    getList(category) {
      let type = category;
      if (type == -1) {
        type = undefined;
      }
      let that = this;
      let params = {
        category: type,
        publishLocation: undefined,
      };
      infoView(params).then((response) => {
        let data = response.rows;
        this.infoList = data;
        console.log("lisy----");
        console.log(data);
        this.$nextTick(() => {
          that.rollUp();
        }, 1000);
      });
    },
    showpublishDialog(item) {
      const infoId = item.infoId;
      getInfoDetail(infoId).then((response) => {
        let data = response.data;
        this.publishObj = data;
        this.publishTitle = data.title;
        this.publishDialog = true;
        this.postinfoRecord(infoId);
      });
    },
    postinfoRecord(id) {
      const infoId = id;
      let params = {
        infoId: id,
      };
      infoRecord(params).then((response) => { });
    },
    strNumSize(tempNum) {
      //判断长度
      var stringNum = tempNum.toString();
      var index = stringNum.indexOf(".");
      var newNum = stringNum;
      if (index != -1) {
        newNum = stringNum.substring(0, index);
      }
      return newNum.length;
    },
    unitConvert(num, type) {
      var moneyUnits = ["元", "万元", "亿元", "万亿"];
      var dividend = 10000;
      var curentNum = num;
      //转换数字
      var curentUnit = moneyUnits[0];
      //转换单位
      if (type == 1) {
        curentNum = curentNum / dividend;
        curentUnit = moneyUnits[1];
      } else {
        for (var i = 0; i < 4; i++) {
          curentUnit = moneyUnits[i];
          if (this.strNumSize(curentNum) < 5) {
            break;
          }
          curentNum = curentNum / dividend;
        }
      }

      var m = { num: 0, unit: "" };
      m.num = curentNum.toFixed(2);
      m.unit = curentUnit;
      return m;
    },
    getNum(numStr) {
      var numBER = Number(numStr);
      var totalAmount = this.unitConvert(numBER);
      return totalAmount.num;
    },
    getWNum(numStr) {
      var numBER = Number(numStr);
      var totalAmount = this.unitConvert(numBER, 1);
      console.log(totalAmount.num + totalAmount.unit);
      return totalAmount.num; //+ totalAmount.unit;
    },
    getNumUnit(numStr) {
      var numBER = Number(numStr);
      var totalAmount = this.unitConvert(numBER);
      return totalAmount.unit;
    },
    tabsOnclick(id, e) {
      // 如果选择的和当前激活的不同
      if (id !== this.activeId) {
        this.getList(id);
        this.activeId = id;
        this.tabsClickScroll("fixednav", e);
      }

      // this.rollUp0()
    },

    tabsClickScroll(refDom, e) {
      const scrollLayx = this.$refs[refDom].offsetLeft;
      const disX = e.target.offsetLeft - scrollLayx;

      // 获取当前元素所在元素的中间位置
      //  console.log("this.$refs[refDom].clientWidth" +this.$refs[refDom].clientWidth)
      const currentMiddleHalf =
        (this.$refs[refDom].clientWidth - e.target.offsetWidth) / 2;

      // layerX 鼠标相比较于当前坐标系的位置,即如果触发元素没有设置绝对定位或相对定位,以页面为参考点,如果有,将改变参考坐标系 event.clientX

      let targetOffset = -(disX - currentMiddleHalf); //判断值
      let ul_width =
        this.$refs["fixednavcontent"].getBoundingClientRect().width; //开始

      if (-targetOffset < 0) {
        //未超出中间值

        this.$refs[refDom].scrollLeft = 0;
        return;
      }
      if (targetOffset < this.$refs[refDom].clientWidth - ul_width) {
        //末尾
        this.$refs[refDom].scrollLeft = -(
          this.$refs[refDom].clientWidth - ul_width
        );
        return;
      }
      //正常
      this.$refs[refDom].scrollLeft = -targetOffset;
      let that = this;
      that.timer = null;
      clearInterval(that.timer);
      this.$nextTick(() => {
        that.rollUp();
      }, 500);
    },

    // 刚进入页面没有点击时的下划线设置

    clearTime() {
      clearInterval(this.timer);
    },
    startTime() {
      this.rollUp0();
    },
    rollUp0() {
      let ul0 = document.getElementById("countBoxContainers");
      // console.log(ul0.offsetHeight)
      let ul1 = document.getElementById("publishMain1");
      let ul2 = document.getElementById("publishMain2");
      let box = document.getElementById("publishMain");
      if (box) {
        box.style.height = ul0.offsetHeight + "px";
      }
      ul2.innerHTML = "";
      if (ul1.offsetHeight > ul0.offsetHeight) {
        ul2.innerHTML = ul1.innerHTML;
        function rollStart() {
          if (box.scrollTop >= ul1.scrollHeight) {
            box.scrollTop = 0;
          } else {
            box.scrollTop++;
          }
        }
        if (this.timer) {
          clearInterval(this.timer);
        }
        this.timer = setInterval(rollStart, 100);
      }
    },
    rollUp() {
      let ul0 = document.getElementById("countBoxContainers");
      // console.log(ul0.offsetHeight)
      let ul1 = document.getElementById("publishMain1");
      let ul2 = document.getElementById("publishMain2");
      let box = document.getElementById("publishMain");
      if (box) {
        box.style.height = ul0.offsetHeight + "px";
      }
      if (ul2) {
        ul2.innerHTML = "";
        if (ul1.offsetHeight > ul0.offsetHeight) {
          ul2.innerHTML = ul1.innerHTML;
          box.scrollTop = 0;
          function rollStart() {
            if (box.scrollTop >= ul1.scrollHeight) {
              box.scrollTop = 0;
            } else {
              box.scrollTop++;
            }
          }
          if (this.timer) {
            ul2.innerHTML = "";
            clearInterval(this.timer);
          }
          this.timer = setInterval(rollStart, 100);
        }
      }

    },
    refreshData(data) {
      if (data.hospitalId) {
        this.queryParams.hospitalId = data.hospitalId;
        this.queryParams.deptId = data.deptId;
      } else {
        this.queryParams.hospitalId = "";
      }
      this.getData();
    },
    getData() {
      this.search();
      let that = this;
      that.getList(-1);
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
    search() {
      console.log("this.everyValue", this.everyValue);
      if (this.everyValue) {
        this.searchEveryDate();
      } else {
        this.searchTotalDate();
      }
      this.getData0();
    },
    NumDescSort(a, b) {
      return a.count - b.count;
    },
    getData0() {
      if (this.queryParams.hospitalId) {
        let that = this;
        that.loading = true;
        let params = {
          startTime: that.dateRange[0],
          endTime: that.dateRange[1],
          deptId: that.queryParams.deptId,
          hospitalId: that.queryParams.hospitalId,
        };
        statisticsHospitalByTime(params).then((response) => {
          if (response.code == 200) {
            let data = response.data;
            console.log(data);
            that.hospitalCountObj = data;
            let deptNameLists = that.deptNameLists;
            if (data.treatmentPlans && data.treatmentPlans.length > 5) {
              treatmentAndIncomeOption1.dataZoom[0].show = true;
            } else {
              treatmentAndIncomeOption1.dataZoom[0].show = false;
            }

            treatmentAndIncomeOption1.title.text =
              that.dateRange[0] +
              " ~ " +
              that.dateRange[1] +
              `${"治疗人次统计表"}`;
            var treatmentAndIncomeChart = echarts.init(
              document.getElementById("appointment")
            );
            let treatmentPlans = data.treatmentPlans.sort(that.NumDescSort);
            let Optionarrs = [];
            var a = JSON.stringify(treatmentPlans).replace(
              /count/g,
              "治疗人次"
            );
            treatmentAndIncomeOption1.dataset.source = JSON.parse(a);
            treatmentAndIncomeOption1.dataset.dimensions = [
              "treatmentName",
              "治疗人次",
            ];

            that.treatmentPlansList = treatmentPlans;

            if (treatmentPlans.length > 0) {
              treatmentAndIncomeChart.clear();
              treatmentAndIncomeChart.setOption(treatmentAndIncomeOption1);
            } else {
              treatmentAndIncomeChart.clear();
              treatmentAndIncomeChart.setOption({
                title: {
                  text: "暂无统计数据!",
                  x: "center",
                  y: "center",
                  textStyle: {
                    fontSize: 16,
                    color: "#909399",
                    fontWeight: "normal",
                  },
                },
              });
            }
          }

          that.loading = false;
        });
      } else {
        // var treatmentAndIncomeChart = echarts.init(document.getElementById("appointment"));
        // treatmentAndIncomeChart.clear()
        // treatmentAndIncomeChart.setOption({
        //         title: {
        //           text: '暂无统计数据!',
        //           x: 'center',
        //           y: 'center',
        //           textStyle: {
        //             fontSize: 16,
        //             color: '#909399',
        //             fontWeight: 'normal'
        //           }
        //         }
        //       })
      }
    },
    searchTotalDate() {
      treatmentAndIncomeOption.title.text =
        this.dateRange[0] + " ~ " + this.dateRange[1] + "数据统计";
      treatmentAndIncomeOption.dataset.source = [];
      console.log(this.queryParams);
      // this.queryParams.beginTime=this.dateRange[0]
      // this.queryParams.endTime=this.dateRange[1]
      // return false、
      let that = this;
      listDashboard(this.addDateRange(this.queryParams, this.dateRange)).then(
        (res) => {
          if (res.code == 200) {
            this.dashboard = res.dashboard;
            let chartData = res.treatMentChart;
            treatmentAndIncomeOption.dataZoom[0].show = false;
            //  that.getWNum(item.treatmentPrice)

            var treatmentAndIncomeChart = echarts.init(
              document.getElementById("treatmentAndIncome")
            );

            treatmentAndIncomeChart.clear();
            if (chartData.length == 0) {
              let opts = {
                title: {
                  text: "暂无统计数据!",
                  x: "center",
                  y: "center",
                  textStyle: {
                    fontSize: 16,
                    color: "#909399",
                    fontWeight: "normal",
                  },
                },
              };
              treatmentAndIncomeChart.setOption(opts);
            } else {
              chartData.forEach((item) => {
                let price = that.getWNum(item.treatmentPrice);
                let label1 = "治疗/人次";
                let label2 = "收入/万元";
                // treatmentAndIncomeOption.dataset.source.push({ product:this.dateRange[0] + ' ~ ' + this.dateRange[1], '治疗/人次': item.countPatient, '收入/万元': price })
                treatmentAndIncomeOption.dataset.source.push({
                  product: item.specificDate,
                  "诊断/人次": item.diagnosisCount,
                  "治疗/人次": item.countPatient,
                  "收入/万元": price,
                });
                treatmentAndIncomeChart.setOption(treatmentAndIncomeOption);
              });
            }
          }
        }
      );
    },
    searchEveryDate() {
      treatmentAndIncomeOption.title.text =
        this.dateRange[0] + " ~ " + this.dateRange[1] + "数据统计";
      treatmentAndIncomeOption.dataset.source = [];
      let that = this;
      listDashboardDate(
        this.addDateRange(this.queryParams, this.dateRange)
      ).then((res) => {
        if (res.code == 200) {
          this.dashboard = res.dashboard;
          let chartData = res.treatMentChart;
          if (res.treatMentChart.length > 1) {
            treatmentAndIncomeOption.dataZoom[0].show = true;
          } else {
            treatmentAndIncomeOption.dataZoom[0].show = false;
          }
          //  that.getWNum(item.treatmentPrice)
          var treatmentAndIncomeChart = echarts.init(
            document.getElementById("treatmentAndIncome")
          );
          treatmentAndIncomeChart.clear();
          if (chartData.length == 0) {
            let opts = {
              title: {
                text: "暂无统计数据!",
                x: "center",
                y: "center",
                textStyle: {
                  fontSize: 16,
                  color: "#909399",
                  fontWeight: "normal",
                },
              },
            };
            treatmentAndIncomeChart.setOption(opts);
          } else {
            chartData.forEach((item) => {
              let price = that.getWNum(item.treatmentPrice);
              let label1 = "治疗/人次";
              let label2 = "收入/万元";
              // treatmentAndIncomeOption.dataset.source.push({ product:this.dateRange[0] + ' ~ ' + this.dateRange[1], '治疗/人次': item.countPatient, '收入/万元': price })
              treatmentAndIncomeOption.dataset.source.push({
                product: item.specificDate,
                "诊断/人次": item.diagnosisCount,
                "治疗/人次": item.countPatient,
                "收入/万元": price,
              });
              treatmentAndIncomeChart.setOption(treatmentAndIncomeOption);
            });
          }
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep.contentBoxRight .el-form-item__label {
  color: #fff !important;
}

::v-deep.contentBoxRight .el-range__close-icon {
  display: none !important;
}

.contentBoxRight .el-form-item {
  margin-bottom: 0px !important;
}

.theme-list {
  margin-top: 0px;
}

.publishTitle {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  line-height: 30px;
}

.publishContent {
  font-size: 18px;
  line-height: 24px;
  margin-top: 20px;
  max-height: 700px;
  overflow-y: auto;

  ::v-deep img {
    max-width: 100% !important;
  }
}

.publishVideo {
  width: 100%;
  height: 400px;
}

.b_list {
  overflow: hidden;
  padding: 20px;
}

.parent-img {
  width: 200px;
  display: block;
  margin: 10px auto;
  margin-top: 65px;
}

.parent-text {
  color: #999;
  text-align: center;
}

.fixed-nav {
  overflow-x: auto;
  max-width: 200px;
  cursor: pointer;
  transition: left 1s ease-in-out;
}

.fixed-nav-content {
  display: inline-block;
  white-space: nowrap;
}

.tab-title {
  display: inline-block;
  padding: 0 8px;
  margin-right: 12px;
  color: #fff;
  border-radius: 13px;
  font-size: 16px;
  flex-shrink: 0;
  height: 30px;
  line-height: 30px;
  position: relative;
  margin: 0px;

  .line0 {
    position: absolute;
    left: 50%;
    width: 20px;
    margin-left: -10px;
    height: 3px;
    background: #fff;
    bottom: 0px;
    border-radius: 3px;
    display: none;
  }
}

.tab-title.select-tab {
  color: #fff;
  font-weight: 700;

  .line0 {
    display: block;
  }
}

::-webkit-scrollbar {
  width: 0.01rem;
  opacity: 0;
  display: none;
}

::-webkit-scrollbar-track {
  background-color: #fff;
  opacity: 0;
}

::-webkit-scrollbar-thumb {
  width: 0.01rem;
  border-radius: 0.01rem;
  opacity: 0;
}

.contentBoxRight {
  display: flex;
  align-items: center;
}

.p_item {
  margin: 0px;
  margin-top: 0px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  color: #333;
}

.b_item {
  line-height: 30px;
  margin-bottom: 10px;
  font-size: 18px;

  .b_itemColor0 {
    color: #0285ff;
    margin-right: 5px;
    font-weight: 700;
  }

  .b_itemColor1 {
    color: rgb(255, 0, 106);
    margin-right: 5px;
    font-weight: 700;
  }

  .b_itemColor2 {
    color: rgb(251, 255, 0);
    margin-right: 5px;
    font-weight: 700;
  }

  .b_itemColor3 {
    color: rgb(0, 255, 42);
    margin-right: 5px;
    font-weight: 700;
  }

  .b_itemColor4 {
    color: rgb(255, 0, 157);
    margin-right: 5px;
    font-weight: 700;
  }
}

.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans",
  "Helvetica Neue",
  Helvetica,
  Arial,
  sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }

  .content {
    width: 100%;
    height: 800px;
    background-image: url("../assets/images/indexBg.jpg");
    background-size: cover;

    .companyIcon {
      width: 100px;
      height: 50px;
      margin-top: 20px;
      margin-left: 30px;
    }

    .textContent {
      color: #ffffff;
      margin-top: 70px;
      margin-left: 140px;

      .companyTitle {
        font-size: 60px;
        font-weight: bold;
      }

      .companyTitle2 {
        font-size: 50px;
        font-weight: bold;
      }

      .companyMark {
        font-size: 26px;
        margin-top: 20px;
      }

      .companyButton {
        font-size: 30px;
        width: 220px;
        height: 66px;
        border-radius: 66px;
        color: #2e3693;
        background-color: #ffffff;
        text-align: center;
        line-height: 66px;
        margin-top: 20px;
      }
    }
  }
}

.formBox {
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2);
  border-radius: 4px 4px 4px 4px;
  padding: 0px;
  margin-bottom: 10px;
}

.formBox .el-form-item {
  margin-bottom: 10px;
}

.contentBox {
  display: flex;
  justify-content: space-between;
  /*align-items: center;*/

  padding: 10px;
}

.contentBox.first {
  background: #0256ff;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  flex-wrap: wrap;
}

.contentBox.second {
  background: #ff6302;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.contentBox .contentBoxLeft {
  display: flex;
  align-items: center;
}

.contentBox .line {
  /*display: inline-block;
  width: 6px;
  height: 23px;
  background: #5972FF;
  border-radius: 10px;
  margin-right: 12px;*/
  width: 40px;
  height: 40px;
  margin-right: 8px;
}

.contentBox .line .imgIcon {
  width: 40px;
  height: 40px;
}

.contentBox .name {
  font-size: 18px;
  color: #fff;
  font-weight: bold;
}

.count-box {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  padding: 0 20px;

  .item-box {
    box-sizing: border-box;
    margin: 10px 0 10px 10px;
    width: 200px;
    height: 89px;
    background: #e3ebff;
    border-radius: 8px 8px 8px 8px;
    padding-left: 17px;
    padding-top: 14px;

    .name {
      font-size: 18px;
      margin-left: 8px;
      color: #1d2129;
    }

    .count {
      font-size: 36px;
      margin-left: 28px;
      margin-top: 15px;
      color: #0256ff;
    }

    .unit {
      margin-left: 8px;
      color: #767676;
    }
  }
}

.everyValueBox {
  display: flex;
  justify-content: center;
  padding-top: 10px;
}

.echart-box {
  //display: flex;
  //justify-content: space-around;
  padding-top: 10px;

  .line {
    width: 1px;
    height: 330px;
    background-color: #d8d8d8;
    margin-top: 30px;
  }
}

::v-deep .el-input__inner {
  height: 32px !important;
  line-height: 32px !important;
}
</style>
